
<template>
  <div class="editstudent">
      <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="试卷名称"
      width="400">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="学科"
      width="400">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>学科: {{ scope.row.name }}</p>
          <p>试卷类型: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
          
          <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="handleEdit(scope.$index, scope.row)" >修改</el-button>
          <el-dialog title="修改信息"  :visible.sync="openOff" center :append-to-body='true' :lock-scroll="false" width="60%">
          <Diog>
          </Diog>
          </el-dialog>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import Diog from './ui/Diog.vue';
  export default {
    data() {
      return {
        tableData: [{
          date: '山东卷',
          name: '语文',
          address: '山东A卷'
        }, {
          date: '江苏卷',
          name: '数学',
          address: '江苏A卷'
        }, {
          date: '北京卷',
          name: '英语',
          address: '北京A卷'
        }, {
          date: '全国卷',
          name: '理综',
          address: '全国B卷'
        }],
        openOff: false,
      }
    },
    methods: {
      handleEdit(index, row) {
        this.openOff=true; //默认页面不显示为false,点击按钮将这个属性变成true
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
        this.tableData.splice(index,1);
      },
      handleAdd(index, row) {
        console.log(index, row);
         this.$router.push('/Add')
        this.tableData.splice(index,1);
      },
    },

    components: {
    Diog
    }

  }
</script>
<style lang="scss" scoped>
    .editstudent{
        width: 80vw;
    }
</style>
